<template>
  <div>
    <el-card>
      <div class="title">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input @clear="search"  clearable v-model="orderList.cluster" placeholder="请输入用户ID/昵称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input type="date"  @clear="search"  clearable v-model="orderList.answertimeStart" placeholder="请输入开始时间"></el-input>
          </el-col>
	  <el-col :span="4">
	     <el-input type="date"  @clear="search"  clearable v-model="orderList.answertimeStop" placeholder="请输入结束时间"></el-input>
	  </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 列表 -->
    <el-card class="card">
       <div>挑战记录列表</div>
       <el-divider></el-divider>
       <el-table @sort-change='sortid' :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :data="answers" style="width: 100%" border>
       <el-table-column  sortable="custom" prop="answertime" label="挑战时间" width="220"></el-table-column>
       <el-table-column prop="utilizer.id" label="用户ID" width="220"></el-table-column>
       <el-table-column prop="utilizer.nickname" label="用户昵称" width="220"></el-table-column>
       <el-table-column  sortable="custom" prop="performance" label="挑战成绩" width="220"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <br /><br />
      <p style="">共计{{total}}条记录</p>
      <paging-query style="margin: -55px 0px 0px 300px;" :pages="pages" :total="total" @currentPage="currentPage"></paging-query>
    </el-card>
  </div>
</template>

<script>
import pagingQuery from "../components/pagination";
import { getAnswers, getAnswersUtilizerSum} from "../api/index";
export default {
  components: {
    pagingQuery
  },
  data() {
    return {
      roleid:1,
      pages: {
        count: 7,
        page: 1
      },
      total:0,
      // 数据
      orderList: {
        cluster: "",
        answertimeStart: "",
        answertimeStop: "",
        sortingKey: "",
	sortingKey:"",
	sortingDirection:false
      },
      answers: []
    };
  },
  created() {
    // 总数
    this.getOrderTotal();
    // 列表
    this.getorderList();
  },
  methods: {
    //排序
    async sortid(colum,prop,order){
      //column：当前列;  prop：当前列需要排序的数据; order：排序的规则（升序、降序和默认[默认就是没排序]）
      //上升ascending==false;   下降descending==true;   没有null;
      console.log(colum.prop)
      if(colum.prop=="answertime"){
        //挑战时间
        this.orderList.sortingKey="answerAnswertime";
        if(colum.order=="ascending"){
          this.orderList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.orderList.sortingDirection=true
          }else{
            this.orderList.sortingKey=""
            this.orderList.sortingDirection=false
          }
      }else if(colum.prop=="performance"){
        //挑战成绩
        this.orderList.sortingKey="answerPerformance";
        if(colum.order=="ascending"){
          this.orderList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.orderList.sortingDirection=true
          }else{
            this.orderList.sortingKey=""
            this.orderList.sortingDirection=false
          }
      }
      this.getorderList()
    },
    // 分页
    currentPage(val) {
      this.pages.page = val;
      this.getorderList();
    },
    // 获取总数
    async getOrderTotal() {
      const res = await getAnswersUtilizerSum({...this.orderList});
       console.log(res.data)
      this.total = res.data.sum;
    },
    // 获取列表
    async getorderList() {
      const res = await getAnswers({ ...this.orderList, ...this.pages });
      if (res.code !== 200)return this.$message.error("获取列表失败,请稍后重试");
      this.answers = res.data.answers;
    },
    // 搜索
    search(){
      this.getorderList()
      this.getOrderTotal()
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  padding-bottom: 3.2px;
}
.card {
  margin-top: 20px;
}
img {
  width: 50px;
  height: 50px;
}
</style>
